<template>
	<view>
		<image src="../../static/bg.jpg" class="bg" mode="scaleToFill"></image>
		<image src="../../static/con2.png" class="con" mode="scaleToFill"></image>
		<view class="con c1">
			<image v-for="item in 9" :src="`../../static/icon/${list.includes(item+1) ? 'a-':''}${item+1}.png`"
				mode="widthFix" @click="list.includes(item+1) ? '' : scan()"></image>
		</view>
		<image v-if="list.length < 9" src="../../static/xl.png" @click="scan" class="xl" mode="widthFix"></image>
		<!-- v-if="list.length == 9 && !giftInfo" -->
		<image v-if="list.length == 9 && !giftInfo" src="../../static/cj.png" @click="choujiang" mode="widthFix"
			class="xl"></image>
		<image v-if="list.length == 9 && giftInfo" src="../../static/jg.png" @click="ckjg" mode="widthFix" class="xl">
		</image>
		<image src="../../static/gz.png" @click="seeRule" class="gz" mode="widthFix"></image>
		<Loading ref="loading"></Loading>
		<ScanModal :img="img" v-model="isScan" @close='closeScan' />
		<Rule v-if="rule" @close="rule = false" />
		<Raffle :giftInfo="giftInfo" :type="giftType" v-if="raffle" @close="closeRaffle" />
		<!-- <LoginModal :show="!isLogin" @close='getData' /> -->
		<BindPhone :value="showBind" @bindPhone="bindPhone" @closeBind="closeBind"></BindPhone>
		<image v-if="openGif" class="gif" src="https://hlximage.xiangle6.cn/home/dragon/5.gif" mode="aspectFit"></image>
	</view>
</template>

<script>
	import ScanModal from './modal/scan.vue'
	import Rule from './modal/rule.vue'
	import Loading from '@/components/loding.vue'
	import LoginModal from '@/components/loginModal.vue'
	import Raffle from './modal/raffle.vue'
	import BindPhone from './modal/bindPhone.vue'
	import {
		request
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				isScan: false,
				rule: false,
				img: -1,
				isLogin: false,
				list: [],
				raffle: false,
				parmas: {},
				giftInfo: {},
				errmsg: '',
				openGif: false,
				giftType: 'no',
				showBind: false,
			}
		},
		components: {
			ScanModal,
			Loading,
			Rule,
			Raffle,
			LoginModal,
			BindPhone
		},
		async onLoad(e) {
			
			// await getApp().login()
			this.$refs.loading.init()
			this.parmas = {
				activityId: Number(e.activityId),
				businessId: Number(e.businessId)
			}
			let userInfo = JSON.parse(uni.getStorageSync('userInfo') || '{}')
			if (!userInfo.phones) {
				this.$refs.loading.destoryed()
				this.showBind = true
				return
			}
			if (!e.activityId || !e.businessId) {
				this.init()
				return
			}
			this.getData()
		},
		onShareAppMessage() {
			const promise = new Promise(resolve => {
				this.$request('/api/type/share_title', {}, 'get').then(res => {
					const obj = res.data.data.find(item => item.dictLabel == 'xunlong_share_title')
					console.log(JSON.parse(obj?.dictValue || '[]'), obj)
					resolve({
						title: JSON.parse(obj?.dictValue || '[]')[Math.floor(Math.random() * JSON
							.parse(obj?.dictValue || '[]').length)] || '寻龙'
					})
				})
			})
			return {
				title: '自定义转发标题',
				path: '/pages/code/code',
				promise
			}
		},
		onShareTimeline() {
			// const promise = new Promise(resolve => {
			// 	this.$request('/api/type/share_title', {}, 'get').then(res => {
			// 		const obj = res.data.data.find(item => item.dictLabel == 'index_share_title')
			// 		console.log(obj)
			// 		resolve({
			// 			title: JSON.parse(obj?.dictValue || '[]')[Math.floor(Math.random() * JSON
			// 				.parse(obj?.dictValue || '[]').length)] || '黄龙溪'
			// 		})
			// 	})
			// })
			return {
				title: this.detailInfo.title,
				path: `pages/code/code`,
			}
		},
		methods: {
			async getData() {
				this.$refs.loading.init()
				this.isLogin = true
				this.$refs.loading.progress = 100
				this.parmas = {
					...this.parmas,
					userId: uni.getStorageSync('userId'),
				}
				// const res = await getApp().login()
				if (this.parmas.businessId) {
					this.getCard(1, Number(this.parmas.businessId))
				} else {
					this.init()
				}
				// return
				// this.init()
			},
			seeRule() {
				this.rule = true
				this.$refs.loading.init()
				this.$refs.loading.progress = 50
				this.$refs.loading.destoryed()
			},
			ckjg() {
				this.raffle = true
				this.$refs.loading.init()
				this.$refs.loading.progress = 50
				this.$refs.loading.destoryed()
			},
			closeScan() {
				this.isScan = false
				// this.init()
			},
			closeRaffle() {
				console.log(111)
				this.raffle = false
			},
			async choujiang() {
				// this.openGif = true
				// this.$refs.loading.init()
				// this.$refs.loading.progress = 50
				const res = await request('/api/hlx-activity/drawLottery', {
					...this.parmas,
					activityId: 1,
				})
				setTimeout(() => {
					this.openGif = false
					this.raffle = true
					this.giftInfo = res.data.data
					this.giftType = (!res.data.data || res.data.data.getstate == -1) ? 'no' : 'yes'
					this.init()
				}, 0)
				// this.$refs.loading.destoryed(() => {
				// 	if (res.data.code == 500) {
				// 		uni.showToast({
				// 			title: res.data.msg,
				// 			icon: 'none'
				// 		})
				// 	}
				// })
				// this.list = res.data.data.map(item => item.cardId)
			},
			scan() {
				uni.scanCode({
					success: (res) => {
						console.log(res)
						const bid = (res.path || res.result).split('=').pop().split('%3D').pop()
						this.$refs.loading.init()
						this.$refs.loading.progress = 50
						this.getCard(1, Number(bid))
						// this.$refs.loading.destoryed(() => {
						// 	if (res.data.code == 500) {
						// 		uni.showToast({
						// 			title: res.data.msg,
						// 			icon: 'none'
						// 		})
						// 	}
						// })
						// setTimeout(() => {
						// 	this.isScan = true
						// 	this.$refs.loading.destoryed()
						// }, 1000)
					},
				})
			},
			async init() {


				const res = await request('/api/hlx-activity/joinActivityResult', {
					activityId: 1,
					userId: uni.getStorageSync('userId')
				}, 'get')
				this.list = res.data.data.map(item => item.cardId)
				const res2 = await request('/api/hlx-activity/joinGoodsResult', {
					activityId: 1,
					userId: uni.getStorageSync('userId')
				}, 'get')
				this.giftInfo = res2.data.data
				// console.log(res2)
				this.$refs.loading.destoryed(() => {
					if (this.errmsg) {
						uni.showToast({
							title: this.errmsg,
							icon: 'none',
							fail(err) {
								console.log(err)
							}
						})
						this.errmsg = ''
					}
				})
				if (this.giftInfo?.code) {
					this.ckjg()
				}
			},
			async getCard(activityId, businessId) {
				const res = await request('/api/hlx-activity/joinActivity', {
					userId: uni.getStorageSync('userId'),
					activityId,
					businessId
				})
				if (res.data.code == 200) {
					this.img = res.data.data
					this.isScan = true
				}
				// this.$refs.loading.destoryed(() => {
				if (res.data.code == 500) {
					this.errmsg = res.data.msg
				}
				this.init()
				// })
				// console.log(res)
			},
			async bindPhone() {
				this.showBind = false
				// await getApp().login()
				// 刷新用户登录信息
				const res = await request('/api/userInfo', {}, 'get')
				uni.setStorageSync('userInfo', JSON.stringify(res.data.data))
				this.init()
			},
			closeBind() {
				uni.navigateBack()
			},
		}
	}
</script>
<style>
	page {
		background: rgb(247, 64, 64);
	}
</style>
<style scoped lang="less">
	.bg {
		position: absolute;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
	}

	.con {
		position: absolute;
		width: 84%;
		height: 600rpx;
		top: 28%;
		left: 8%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: center;


		image {
			margin-top: -15rpx;
			margin-left: -15rpx;
			width: 29%;
			height: 170rpx;
			// &:nth-child(1){
			// 	margin: 0;
			// }
			// &:nth-child(2){
			// 	margin: 0;
			// }
			// &:nth-child(3){
			// 	margin: 0;
			// }
			// &:nth-child(3n-1){
			// 	margin-left: -30rpx;
			// }
			// &:nth-child(3n){
			// 	margin-left: -30rpx;
			// }
		}
	}

	.c1 {
		padding-left: 3%;
		padding-top: 40rpx;
	}

	.xl {
		position: absolute;
		top: calc(28% + 630rpx);
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		width: 50%;
	}

	.gz {
		position: absolute;
		top: calc(28% + 760rpx);
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		width: 50%;
		z-index: 5;
	}

	.gif {
		width: 100vw;
		z-index: 99;
		height: 50vh;
		position: fixed;
		left: 0;
		top: 20%;
	}
</style>